<template>
    <div class="card about-project art-custom-card">
        <div>
            <h2 class="box-title">关于项目</h2>
            <p>{{ systemName }} 是一款专注于用户体验和视觉设计的后台管理系统模版</p>
            <p>使用了 Vue3、TypeScript、Vite、Element Plus 等前沿技术</p>

            <div class="button-wrap">
                <div class="btn art-custom-card">
                    <span>项目官网</span>
                    <i class="iconfont-sys">&#xe703;</i>
                </div>
                <div class="btn art-custom-card">
                    <span>文档</span>
                    <i class="iconfont-sys">&#xe703;</i>
                </div>
                <div class="btn art-custom-card">
                    <span>Github</span>
                    <i class="iconfont-sys">&#xe703;</i>
                </div>
                <div class="btn art-custom-card">
                    <span>博客</span>
                    <i class="iconfont-sys">&#xe703;</i>
                </div>
            </div>
        </div>
        <img class="right-img" src="@imgs/draw/draw1.png" alt="draw1" />
    </div>
</template>

<script setup lang="ts">
import AppConfig from '@/config'

const systemName = AppConfig.systemInfo.name
</script>

<style lang="scss" scoped>
.about-project {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    height: 300px;
    padding: 20px;

    h2 {
        margin-top: 10px;
        font-size: 20px;
        font-weight: 500;
        color: var(--art-gray-900) !important;
    }

    p {
        margin-top: 5px;
        font-size: 14px;
        color: var(--art-gray-600);
    }
}

.button-wrap {
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    margin-top: 35px;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 240px;
    height: 50px;
    padding: 0 15px;
    margin: 0 15px 15px 0;
    font-size: 14px;
    color: var(--art-gray-800);
    cursor: pointer;
    background: var(--art-bg-color);
    border-radius: calc(var(--custom-radius) / 2 + 2px) !important;
    transition: all 0.3s;

    &:hover {
        box-shadow: 0 5px 10px rgb(0 0 0 / 5%);
        transform: translateY(-4px);
    }
}

// 响应式设计 - iPad Pro及以下
@media screen and (max-width: $device-ipad-pro) {
    .about-project {
        height: auto;
    }

    .button-wrap {
        width: 470px;
        margin-top: 20px;
    }

    .btn {
        width: 180px;
    }

    .right-img {
        width: 300px;
        height: 230px;
    }
}

// 响应式设计 - iPad垂直及以下
@media screen and (max-width: $device-ipad-vertical) {
    .button-wrap {
        width: 100%;
    }

    .btn {
        width: 190px;
    }

    .right-img {
        display: none;
    }
}

// 响应式设计 - 手机端
@media screen and (max-width: $device-phone) {
    .about-project {
        padding: 0 15px;
    }

    .btn {
        width: 100%;
        margin-right: 0;
    }
}
</style>
